<template>
	<base-image
		v-if="show"
		class="text-primary text-[14px] w-4 cursor-pointer"
		src="sports/video.svg"
		@click.stop="onClick"></base-image>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { BaseImage } from '@/components/base'
import { useSportsStore } from '@/store'
import { SportsType } from '@/enums'

const sportsStore = useSportsStore()

const props = defineProps({
	eventId: {
		type: String,
		default: ''
	},
	channel: {
		type: String,
		default: ''
	},
	sportId: {
		type: String as PropType<SportsType>,
		default: ''
	}
})

const show = computed(
	() => props.channel && (props.sportId === SportsType.fifa24 || props.sportId === SportsType.nba2k)
)

const onClick = () => {
	sportsStore.setLiveStream(props.eventId)
}
</script>
